<template>
  <div class="form-card">
    <form @submit.prevent="onSubmit">
        <div class="form-row">
          <label>{{ $t('register.idNumber') }}</label>
          <input 
            v-model="form.idNumber" 
            :class="{ error: idNumberError }"
            @input="validateIdNumber"
            placeholder="请输入18位身份证号"
            required 
          />
          <span v-if="idNumberError" class="error-icon">⚠️</span>
        </div>
        <div class="form-row">
          <label>{{ $t('register.name') }}</label>
          <input v-model="form.name" required />
        </div>
        <div class="form-row">
          <label>{{ $t('register.mobile') }}</label>
          <input 
            v-model="form.mobile" 
            :class="{ error: mobileError }"
            @input="validateMobile"
            placeholder="请输入11位手机号"
            required 
          />
          <span v-if="mobileError" class="error-icon">⚠️</span>
        </div>
      <div class="form-row">
        <label>{{ $t('register.password') }}</label>
        <input type="password" v-model="form.password" required />
      </div>
      <div class="actions-center">
        <button class="btn-primary" type="submit">{{ $t('register.submit') }}</button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'RegisterInline',
  data() {
    return { 
      form: { idNumber: '', name: '', mobile: '', password: '' },
      idNumberError: false,
      mobileError: false
    }
  },
  methods: {
    validateIdNumber() {
      const idRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      this.idNumberError = this.form.idNumber && !idRegex.test(this.form.idNumber)
    },
    validateMobile() {
      const mobileRegex = /^1[3-9]\d{9}$/
      this.mobileError = this.form.mobile && !mobileRegex.test(this.form.mobile)
    },
    async onSubmit() {
      // 验证格式
      this.validateIdNumber()
      this.validateMobile()
      
      if (this.idNumberError || this.mobileError) {
        alert('请检查身份证号和手机号格式！')
        return
      }
      
      try {
        await axios.post('/api/auth/register', this.form)
        alert('Registered')
        this.$emit('success')
      } catch (e) {
        alert('Register failed')
      }
    }
  }
}
</script>

<style scoped>
</style>
